<template>
  <div class="home">
    <!--  顶部工具栏  -->
    <Toolbar/>
    <main>
      <!--   左侧组件   -->
      <section class="left border-r-ddd">
        <!--   上方组件列表   -->
        <ComponentList/>
        <!--   下方已选组件列表   -->
        <RealTimeComponentList/>
      </section>
      <!--   中心画布   -->
      <section class="center">
        <div
            class="content"
            @drop="handleDrop"
            @dragover="handleDragOver"
            @mousedown="handleMouseDown"
            @mouseup="deselectCurComponent"
        >
          <Editor/>
        </div>
      </section>
      <!--   右侧属性   -->
      <section class="right border-l-ddd">
        <el-tabs v-if="curComponent" v-model="activeName">
          <el-tab-pane label="属性" name="attr">
            <component :is="curComponent.component + 'Attr'"/>
          </el-tab-pane>
           <el-tab-pane label="动画" name="animation" style="padding-top: 20px;">
            <!--            <AnimationList/>-->
          </el-tab-pane>
          <el-tab-pane label="事件" name="events" style="padding-top: 20px;">
            <!--            <EventList/>-->
          </el-tab-pane>
        </el-tabs>
        <!--   画布属性    -->
        <div v-else>画布属性</div>
      </section>
    </main>
  </div>
</template>

<script>
import ComponentList from '@/components/ComponentList'
import Toolbar from '@/components/Toolbar'
import RealTimeComponentList from '@/components/RealTimeComponentList'
import Editor from "@/components/Editor";
import componentList from '@/custom-component/component-list'
import {deepCopy} from '@/utils/utils'
import generateID from "@/utils/generateID";
import {changeComponentSizeWithScale} from "@/utils/changeComponentsSizeWithScale";
import {mapState} from "vuex";
import eventBus from "@/utils/eventBus";

export default {
  name: 'Home',
  components: {
    Toolbar, ComponentList, RealTimeComponentList, Editor
  },
  computed: mapState([
    'componentData',
    'curComponent',
    'isClickComponent',
    'canvasStyleData',
    'editor',
  ]),
  data() {
    return {
      activeName: 'attr',
      reSelectAnimateIndex: undefined,
    }
  },
  mounted() {
    // 获取编辑器元素  id="editor"
    this.$store.commit('getEditor')

    // eventBus.$on('hideArea', () => {
    //   this.hideArea()
    // })
  },
  methods: {
    handleDrop(e) {
      e.preventDefault(); // 阻止事件默认行为
      e.stopPropagation(); // 阻止事件冒泡
      const index = e.dataTransfer.getData('index');
      // 拿到选中组件，并添加到当前的组件列表中
      const component = deepCopy(componentList[index]);
      //  拿到的组件位置要减掉中间画布距离屏幕的值，才是相对于画布左上角定位的数据
      component.style.top = e.clientY - 104;
      component.style.left = e.clientX - 239;
      component.id = generateID();
      this.$store.commit('addComponent', {component})
    },

    handleDragOver(e) {
      /*
      * DataTransfer.dropEffect 属性控制在拖放操作中给用户的反馈（通常是视觉上的）。它会影响在拖拽过程中光标的手势。
      * 例如，当用户 hover 在一个放置目标元素上，浏览器的光标可能会预示了将会发生什么操作。
      * */
      e.preventDefault(); // 不阻止ondragover默认事件就无法触发ondrop函数
      e.dataTransfer.dropEffect = 'copy'; // 设置拖放目标上允许发生的拖放行为,以显示拖放时不同的手势图标
    },

    // 取消点击
    deselectCurComponent(e) {
      if (!this.isClickComponent) {
        this.$store.commit('setCurComponent', {
          component: null,
          index: null,
        })
      }
    },

    // 点击
    handleMouseDown(e) {
      e.stopPropagation()
      this.$store.commit('setClickComponentStatus', false)
      this.$store.commit('setInEditorStatus', true)
    },
  },

  hideArea() {
    this.isShowArea = 0
    this.width = 0
    this.height = 0

    this.$store.commit('setAreaData', {
      style: {
        left: 0,
        top: 0,
        width: 0,
        height: 0,
      },
      components: [],
    })
  },
}
</script>
<style lang="scss" scoped>
.home {
  height: 100vh;
  background: #fff;

  main {
    height: calc(100% - 64px);
    display: flex;

    .left {
      width: 200px;
    }

    .center {
      flex: 1;
      width: 100%;
      height: 100%;

      .content {
        width: 100%;
        height: 100%;
        background-color: #f0f2f3;
        padding: 40px;
      }
    }

    .right {
      width: 260px;
    }
  }

}

.placeholder {
  text-align: center;
  color: #333;
}
</style>
